<!doctype html>
<html lang="en">

	<head>

		<!-- Basic Page Needs
    ================================================== -->
		<title>TubeLite Streaming Video HTML Template</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="TubeLite is - Professional A unique and beautiful collection of UI elements">
		<link rel="icon" href="assets/images/favicon.png">

		<!-- CSS 
    ================================================== -->
		<link rel="stylesheet" href="assets/css/style.css">
		<link rel="stylesheet" href="assets/css/night-mode.css">
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/css/uikit.min.css">

		<!-- icons
    ================================================== -->
		<link rel="stylesheet" href="assets/css/icons.css">

		<!-- Google font
    ================================================== -->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">


	</head>

	<body>

		<!-- Wrapper -->
		<div id="wrapper">

			<!-- sidebar -->
			<div class="main_sidebar">
				<div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

				<!-- sidebar header -->
				<div class="sidebar-header">
					<h4> 导航</h4>
					<span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
				</div>

				<!-- sidebar Menu -->
				<div class="sidebar">
					<div class="sidebar_innr" data-simplebar>

						<div class="sections">
							<h3> 浏览 </h3>
							<ul>
								<li> <a href="home.html"> <i class="uil-home-alt"></i> <span> 首页 </span> </a></li>
								<li class="active"> <a href="your-watch-later.html"> <i class="uil-clock"></i> <span> 电影列表 </span> </a></li>
							</ul>
						</div>










					</div>


				</div>

			</div>

			<!-- header -->
			<div id="main_header">
				<header>

					<!-- Logo-->
					<i class="header-traiger uil-bars" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></i>

					<!-- Logo-->
					<div id="logo">
						<a href="#"> <img src="assets/images/logo.png" alt=""></a>
						<a href="#"> <img src="assets/images/logo-light.png" class="logo-inverse" alt=""></a>
					</div>

					<!-- form search-->
					<div class="head_search">
						<form>
							<div class="head_search_cont">
								<input value="" type="text" class="form-control" placeholder="搜索电影" autocomplete="off"  onkeydown="checkInfo(event,this)">
								
								<i class="s_icon uil-search-alt"></i>
							
							</div>

							<!-- Search box dropdown -->
							<div uk-dropdown="pos: top;mode:click;animation: uk-animation-slide-bottom-small" class="dropdown-search">
								<!-- User menu -->
							</div>
						</form>
					</div>
					<!-- user icons -->
					<div class="head_user">
						<span>

						</span>
						<!-- profile -image -->
						<a class="opts_account"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></a>

						<!-- profile dropdown-->
						<div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small" class="dropdown-notifications small">



							<!-- User menu -->

							<ul class="dropdown-user-menu">
								<li>
									<a href="#" id="night-mode" class="btn-night-mode">
										<i class="icon-feather-moon"></i> 模式切换
										<span class="btn-night-mode-switch">
											<span class="uk-switch-button"></span>
										</span>
									</a>
								</li>
								<li><a href="page-setting.html"> <i class="uil-cog"></i>个人信息</a></li>
								<div class="menu-divider">
									<li><a href="form-modern-login.html"> <i class="icon-feather-log-out"></i> 登出</a>
									</li>
							</ul>


						</div>

					</div>

				</header>

			</div>


			<!-- contents -->
			<div class="main_content">

				<div class="main_content_inner">


					<div class="uk-width-expand">

						<div class="section-header mb-lg-5 border-0 uk-flex-middle">
							<div class="section-header-left">
								<h3 class="uk-heading-line text-left"><span> 电影列表 </span></h3>
								<ul uk-tab>

								</ul>
								<ul uk-tab>
									<li class="uk-disabled"><a>地区</a></li>
									<li><a onclick="b(this.text)">全部</a></li>
								    <li><a onclick="b(this.text)">华语</a></li>
								    <li><a onclick="b(this.text)">美国</a></li>
								    <li><a onclick="b(this.text)">欧洲</a></li>  
									<li><a onclick="b(this.text)">韩国</a></li>  
									<li><a onclick="b(this.text)">日本</a></li>  
									<li><a onclick="b(this.text)">泰国</a></li>  
									<li><a onclick="b(this.text)">印度</a></li>  
									<li><a onclick="b(this.text)">日本</a></li>  
								</ul>
								<ul uk-tab>

								</ul>
							</div>

						</div>

						<div class="uk-child-width-1-3@m" id="list" uk-grid uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100">


						</div>

					</div>

					<ul class="uk-pagination my-5 uk-flex-center" uk-margin>
						
					</ul>
				</div>
				<div class="footer">
					<div class="uk-grid-collapse" uk-grid>
						<div class="uk-width-expand@s uk-first-column">
							<p> 2020 <strong>TubeLite</strong>. 版权所有. </p>
						</div>
						<div class="uk-width-auto@s">
							<nav class="footer-nav-icon">
								<ul>

								</ul>
							</nav>
						</div>
					</div>
				</div>

			</div>
		</div>

		</div>


		<!-- For Night mode -->
		<script>
			(function(window, document, undefined) {
				'use strict';
				if (!('localStorage' in window)) return;
				var nightMode = localStorage.getItem('gmtNightMode');
				if (nightMode) {
					document.documentElement.className += ' night-mode';
				}
			})(window, document);


			(function(window, document, undefined) {

				'use strict';

				// Feature test
				if (!('localStorage' in window)) return;

				// Get our newly insert toggle
				var nightMode = document.querySelector('#night-mode');
				if (!nightMode) return;

				// When clicked, toggle night mode on or off
				nightMode.addEventListener('click', function(event) {
					event.preventDefault();
					document.documentElement.classList.toggle('night-mode');
					if (document.documentElement.classList.contains('night-mode')) {
						localStorage.setItem('gmtNightMode', true);
						return;
					}
					localStorage.removeItem('gmtNightMode');
				}, false);

			})(window, document);
		</script>


		<!-- javaScripts
                ================================================== -->
		<script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/js/uikit.min.js"></script>
		<script src="assets/js/jquery-3.3.1.min.js"></script>
		<script src="assets/js/simplebar.js"></script>
		<script src="assets/js/main.js"></script>
		<script src="assets/js/public.js"></script>
		<script>
			
			var now=  new Date().getFullYear();
			var showTime = new Date();
			showTime.setFullYear(now+1)

			var videoRegion = "";
			var typeId = "";
			function a(nam){
				showTime = nam;
				if(nam=="全部"||nam==""){
				var now=  new Date().getFullYear();
				showTime = new Date(); 
				showTime.setFullYear(now+1)	
				}else{
					var now=  new Date().getFullYear();
					showTime = new Date(); 
					showTime.setFullYear(nam)
				}
				 init(0,showTime,videoRegion,typeId);
				 
			}
			function b(nam){
				if(nam=="全部"){
					videoRegion="";
				}else{
				videoRegion = nam;		
				}
				
				init(0,showTime,videoRegion,typeId);
				
			}
			function c(nam){
				if(nam=="全部"){
					typeId="";
				}else{
					typeId = nam.id;
					}
				
				init(0,showTime,videoRegion,typeId);
				
			}
			
			
			var num=0;
			var limit = 3;
			$.ajax({
				url: apiurl + 'tVideoType/selectAll',
				type: 'get',
				success:function(data){
					var html = "";
					html+="<li class='uk-disabled'><a>类型</a></li>"; 	
						 html+="<li><a onclick='c(this.text)'>全部</a></li>"; 
					for(var i = 0; i < data.data.length; i++){
					   html+="<li ><a id="+data.data[i].vtId+" onclick='c(this)'>"+ data.data[i].vtName +"</a></li>";
					}
					$(".section-header-left ul").eq(0).append(html);
				}
			})
			
			// totalCount
			function init(start,showTime,videoRegion,typeId){
		
				$.ajax({
					url: apiurl + 'tVideo/selectList',
					type: 'post',
					async:false, 
					data: {
						'start':start*limit, 
						'limit':limit,
						'showTime':showTime,
						'videoRegion':videoRegion,
						'typeId':typeId
					},
					success: function(data) {
						
					    num = data.data.totalCount;
						var html = "";
						for (var i = 0; i < data.data.list.length; i++) {
							html += " <div>";
							html += "<a href='single-video.html?url=" + data.data.list[i].videoUrl + "' class='video-post'>";
							html += "<div class='video-post-thumbnail'>";
							html += "<span class='video-post-count'>" + data.data.list[i].playCount + "</span>";
							html += "<span class='video-post-time'>" + data.data.list[i].videoTime + "</span>";
							html += "<span class='play-btn-trigger'></span>";
							html += "<img src=" + imgurl + data.data.list[i].videoCover + " alt=''>";
							html += "</div>";
							html += "<div class='video-post-content'>";
							html += "<h3>" + data.data.list[i].videoTitle + "</h3>";
							html += "<span class='video-post-date'>" + data.data.list[i].createTime + "</span>";
							html += "</div>";
							html += "</a>";
							html += "</div>";
						}
						$("#list div").remove()
						$("#list").append(html)
						var html = "";
						 html+="<li class='uk-active'><span>1</span></li>"; 
									
						num = Math.ceil(num/limit);
						 for(var i = 1 ; i<num ; i++){
							html+="<li><span>"+(i+1)+"</span></li>";
						 }
						  $(".uk-flex-center li").remove()
						 $(".uk-flex-center").append(html);
						 $(".uk-flex-center li span").click(function(){
						 init(this.innerHTML-1)
						 });
					}
				})
			}
			 $(function(){
				 init(0,showTime,videoRegion,typeId);

				 var html = "";
				 html+="<li class='uk-active'><span>1</span></li>"; 
			
				num = Math.ceil(num/limit);
				 for(var i = 1 ; i<num ; i++){
					html+="<li><span>"+(i+1)+"</span></li>";
				 }
				  $(".uk-flex-center li").remove()
				 $(".uk-flex-center").append(html);
				   $(".uk-flex-center li span").click(function(){
			       init(this.innerHTML-1)
				   });
			 })

			var date = new Date();
			var year = date.getFullYear();
			var ul = "";
                  ul+="<li class='uk-disabled'><a>时间</a></li>"; 
				  ul+="<li ><a onclick='a(this.text)'>全部</a></li>"; 
				  ul+="<li ><a onclick='a(this.text)'>"+year+"</a></li>";
				  ul+="<li ><a onclick='a(this.text)'>"+(year-1)+"</a></li>";
				  ul+="<li ><a onclick='a(this.text)'>"+(year-2)+"</a></li>";
				  ul+="<li ><a onclick='a(this.text)'>"+(year-3)+"</a></li>";
			      ul+="<li ><a onclick='a(this.text)'>"+(year-4)+"</a></li>";
			      ul+="<li ><a onclick='a(this.text)'>"+(year-5)+"</a></li>";
			$(".section-header-left ul").eq(2).append(ul);
			
			checkInfo = function(event,self){
			        if (event.keyCode == 13) {
						var videoTitle = $(".form-control").val();
						$.ajax({
							url: apiurl + 'tVideo/selectbyName',
							type: 'post',
							async:false, 
							data: {
								'start':1, 
								'limit':limit,
								'videoTitle':videoTitle,
							},
							success: function(data) {
							    num = data.data.totalCount;
								
								var html = "";
								for (var i = 0; i < data.data.list.length; i++) {
									html += " <div>";
									html += "<a href='single-video.html?url=" + data.data.list[i].videoUrl + "' class='video-post'>";
									html += "<div class='video-post-thumbnail'>";
									html += "<span class='video-post-count'>" + data.data.list[i].playCount + "</span>";
									html += "<span class='video-post-time'>" + data.data.list[i].videoTime + "</span>";
									html += "<span class='play-btn-trigger'></span>";
									html += "<img src=" + imgurl + data.data.list[i].videoCover + " alt=''>";
									html += "</div>";
									html += "<div class='video-post-content'>";
									html += "<h3>" + data.data.list[i].videoTitle + "</h3>";
									html += "<span class='video-post-date'>" + data.data.list[i].createTime + "</span>";
									html += "</div>";
									html += "</a>";
									html += "</div>";
								}
								$("#list div").remove()
								var list = "";
								num = Math.ceil(num/limit);
								 list+="<li class='uk-active'><span>1</span></li>"; 
								 for(var i = 1 ; i<num ; i++){
									list+="<li><span>"+(i+1)+"</span></li>";
								 }
								 $(".uk-flex-center li").remove()
								 $(".uk-flex-center").append(list);
								$("#list").append(html)
							}
						})
			            event.cancleBubble = true;
			            event.returnValue = false;
			            return false;
			        }
			    }


		</script>

	</body>

</html>
